<script setup>
import { onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

onMounted(() => {
  // 配置高德地图安全密钥
  window._AMapSecurityConfig = {
    securityJsCode: "ad3b412838f9c9558233a12079de4208", // 安全密钥
  };

  AMapLoader.load({
    key: "4220e9fd8cd1265027376b1f44b6313b", // 高德地图API Key
    version: "2.0", // 使用高德地图 JS API 的最新版本
    plugins: ["AMap.Buildings", "AMap.Lights", "AMap.DistrictSearch", "Loca"], // 引入必要插件
  })
    .then((AMap) => {
      // 初始化地图
      const map = new AMap.Map("MapContainer", {
        zoom: 11, // 初始缩放级别
        center: [100.5750, 25.8250], // 地图中心点
        mapStyle: "amap://styles/dark", // 暗黑主题
        viewMode: "3D", // 3D视图模式
        pitch: 50, // 视角
        rotation: 20, // 旋转角度
      });

      // 设置环境光和天空颜色
      // if (AMap.Lights) {
        const lights = new AMap.Lights(); // 创建光照实例
        lights.setAmbientLight([0.2, 0.2, 0.2]); // 设置环境光颜色为灰色（R, G, B）
        lights.setMainLight({
          intensity: 1, // 主光源强度
          color: "#ffffff", // 主光源颜色
        });
        lights.setSkyColor("#000000"); // 设置天空颜色为黑色
        map.setLights(lights); // 将光照效果应用到地图
      // }

      // 配置建筑物样式
      const buildings = new AMap.Buildings();
      buildings.setStyle({
        hideWithoutStyle: false, // 显示所有建筑物
      });
      map.add(buildings);

      // 使用 DistrictSearch 获取宾川县边界
      const districtSearch = new AMap.DistrictSearch({
        level: "district", // 查询级别为区县
        extensions: "all", // 返回边界数据
      });

      districtSearch.search("宾川县", (status, result) => {
        if (status === "complete" && result.boundaries) {
          const boundaries = result.boundaries;

          // 初始化 Loca
          const loca = new Loca.Container({
            map: map, // 绑定到地图实例
          });

          // 创建极光效果的多边形图层
          const layer = new Loca.PolygonLayer({
            loca: loca,
            zIndex: 10, // 图层层级
          });

          // 设置数据
          layer.setData(
            boundaries.map((boundary) => ({
              coordinates: [boundary],
            })),
            {
              lnglat: "coordinates",
            }
          );

          // 设置极光样式
          layer.setOptions({
            style: {
              height: () => Math.random() * 2000 + 1000, // 随机高度
              color: "#FFD700", // 金色
              opacity: 0.8, // 透明度
            },
          });

          // 渲染图层
          loca.add(layer);
          loca.render();
        } else {
          console.error("获取宾川县边界失败：", result);
        }
      });

      // 监听地图点击事件
      map.on("click", (event) => {
        const { lng, lat } = event.lnglat; // 获取点击位置经纬度
        console.log("点击位置的经纬度：", lng, lat);

        // 设置点击位置附近建筑物为金色
        buildings.setStyle({
          hideWithoutStyle: false,
          areas: [
            {
              color1: "#FFD700", // 顶部颜色
              color2: "#FFD700", // 侧面颜色
              path: [
                [lng - 0.0005, lat - 0.0005],
                [lng + 0.0005, lat - 0.0005],
                [lng + 0.0005, lat + 0.0005],
                [lng - 0.0005, lat + 0.0005],
                [lng - 0.0005, lat - 0.0005], // 闭合路径
              ],
            },
          ],
        });
      });
    })
    .catch((error) => {
      console.error("加载高德地图失败：", error);
    });
});
</script>

<template>
  <div>
    高德地图Demo-宾川县极光轮廓
    <div id="MapContainer"></div>
  </div>
</template>

<style scoped>
#MapContainer {
  width: 100%;
  height: 800px; /* 根据需要调整高度 */
}
</style>